<template>
    <div class="page">
        <!-- 表单 -->
        <commpVxeTable
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columns"
            :formItem="fromItem"
            :isCanWrap='true'
            :conditionBtnRow="true"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >

            <template v-slot:operation_btn="{row}" data-desc="操作">
                <a-form layout="inline">
                <a-form-item>
                        <a-button class="blue-btn" @click="handlerEdit(row)" icon="edit">办理</a-button>
                </a-form-item>

                <!-- <a-form-item>
                        <a-button class="red-btn"  @click="handlerDelete(row)">删除</a-button>
                </a-form-item> -->
                </a-form>
            </template>
            <template v-slot:data1_default="{row}">
                <span style="padding-right: 21;" v-if="row.fjcyxm.length == 2">
                    <span v-for="(trem,tI) in row.fjcyxm.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.fjcyxm.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.fjcyxm }}</span>
            </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" @success="success"/>
    </div>
</template>
<script>
//流程接口
import {
    queryJobByJobId,
} from "./service/index";
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal'
export default {
    components:{
        commpVxeTable,
        handleModal,
    },
    props:{},
    data(){
        return{
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.flowJobPage,
                rowId: 'id',
                paramet: {}
            },
            columns: [
                {
                    type: "checkbox",
                    width: 60,
                    fixed: 'left'
                },{
                    field: "fjcyxm",
                    title: "姓名",
                    titleInterval:true,
                    slots: {
                        header:'data1_header',
                        // default:'data1_default',
                    },
                    width: 100,
                },{
                    field: "fgzdw",
                    title: "工作单位",
                    // width: "150",
                },{
                    field: "fqymc",
                    title: "被审评单位",
                    // width: "150",
                },{
                    field: "fjclx",
                    title: "审评类型",
                    // width: "150",
                },{
                    field: "fjcsj",
                    title: "审评时间",
                    width: 200,
                },{
                    field: "fhjmc",
                    title: "环节名称",
                    width: 100,
                },
                // {
                //   field: "fdbr",
                //   title: "待办人",
                //   // width: "150",
                // },
                {
                    field: "ffsrmc",
                    title: "发送人",
                    width: 100,
                },{
                    field: "ffssj",
                    title: "发送时间",
                    width: 170,
                },
                // {
                //   field: "fblzt",
                //   title: "办理状态",
                //   // fixed:"right",
                //   // width: "150",
                // },
                {
                    field: "operate",
                    title: "操作",
                    fixed: "right",
                    width: "100",
                    slots: {
                    // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                },
            ],
            fromItem: [
                {
                    model: "fjcyxm",
                    label: "姓名",
                    interval:true,
                },{
                    model: "fhjmc",
                    label: "环节名称",
                    placeholder: '环节名称',
                    type:'Select',
                    dictionaryType:'预备审评员考评流程环节'
                },
            ],
            checkboxArr:[],
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            //console.log('重置')
            this.reCommpVxeTable = Date.now()
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        success(){
            this.reCommpVxeTable = Date.now()
        },
        //选择表格
        checkboxChange(val,records){
            //console.log(val,records)
            this.checkboxArr = val
            //console.log(this.checkboxArr)
        },
        async handlerEdit(row) {
            const res = await queryJobByJobId({ jobid: row.jobid });
            if (res.success) {
                // this.model = res.result;
                // this.jobid = row.jobid;
                // this.type = row.fhjmc;
                // this.ybid = row.ybid;
                // this.ybkp = res.result.ybkp;
                // this.nextNode = res.result.nextNode;
                // this.nextNodeDbrList = res.result.nextNodeDbrList
                // this.modal.visabled = true;
                this.$refs.handleModalRef.getData(res.result,false)
            } else {
                this.$message.error(res.message);
            }
        },
    }
}
</script>
